<template>
    <div class="registerContainer">
        <el-card class="register-card" :body-style="{ padding: '20px' }">
            <h2 class="register-title">注册</h2>

            <!-- 表单 -->
            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" style="padding-right: 5%;">
                <!-- 邮箱输入框 -->
                <el-form-item label="邮箱" prop="email">
                    <el-input size="large" v-model="form.email" placeholder="请输入邮箱" />
                </el-form-item>

                <!-- 姓名输入框 -->
                <el-form-item label="姓名" prop="name">
                    <el-input size="large" v-model="form.name" placeholder="请输入姓名" />
                </el-form-item>

                <!-- 电话输入框 -->
                <el-form-item label="电话" prop="phone">
                    <el-input size="large" v-model="form.phone" placeholder="请输入电话" />
                </el-form-item>

                <!-- 单位名称输入框 -->
                <el-form-item label="单位名称" prop="companyName">
                    <el-input size="large" v-model="form.companyName" placeholder="请输入单位名称" />
                </el-form-item>

                <!-- 单位地址输入框 -->
                <el-form-item label="单位地址" prop="companyAddress">
                    <el-input size="large" v-model="form.companyAddress" placeholder="请输入单位地址" />
                </el-form-item>

                <!-- 身份选择下拉框 -->
                <el-form-item label="身份选择" prop="role">
                    <el-select v-model="form.role" placeholder="请选择身份" size="large">
                        <el-option label="算法征集者" value="algorithmContributor" />
                        <el-option label="组件测试人员" value="componentTester" />
                        <el-option label="组件演示人员" value="componentPresenter" />
                        <el-option label="评审专家" value="reviewer" />
                        <el-option label="开发者" value="developer" />
                    </el-select>
                </el-form-item>
                <!-- 登录密码输入框 -->
                <el-form-item label="登录密码" prop="password">
                    <el-input size="large" v-model="form.password" type="password" placeholder="请输入密码" />
                </el-form-item>

                <!-- 确认密码输入框 -->
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input size="large" v-model="form.confirmPassword" type="password" placeholder="请确认密码" />
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button size="large" type="primary" @click="handleRegister" :loading="loading"
                        style="width: 100%">注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElCard, ElSelect, ElOption, ElMessage } from 'element-plus';
import { register } from '@/api';
import router from '@/router';

export default defineComponent({
    name: 'Register',
    components: {
        ElForm,
        ElFormItem,
        ElInput,
        ElButton,
        ElCard,
        ElSelect,
        ElOption
    },
    setup() {
        // 表单数据
        const form = ref({
            email: '',
            name: '',
            password: '',
            confirmPassword: '',
            phone: '',
            companyName: '',
            companyAddress: '',
            role: ''
        });

        const loading = ref(false); // 控制按钮的加载状态
        const formRef = ref(null);
        // 密码确认匹配校验
        const checkPasswordMatch = (rule: any, value: string, callback: Function) => {
            if (value !== form.value.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        };
        // 表单验证规则
        const rules = {
            email: [
                { required: true, message: '请输入邮箱', trigger: 'blur' },
                { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
            ],
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            confirmPassword: [
                { required: true, message: '请确认密码', trigger: 'blur' },
                { validator: checkPasswordMatch, trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入电话', trigger: 'blur' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
            ],
            companyName: [
                { required: true, message: '请输入单位名称', trigger: 'blur' }
            ],
            companyAddress: [
                { required: true, message: '请输入单位地址', trigger: 'blur' }
            ],
            role: [
                { required: true, message: '请选择身份', trigger: 'change' }
            ]
        };



        // 注册按钮点击事件处理
        const handleRegister = async () => {

            // 表单验证
            await formRef.value?.validate().then(() => {
                loading.value = true;
                register(getRequestBody()).then(res => {
                    if (res['code'] == 200) {
                  
                        ElMessage.success("注册成功！")
                        router.push({ "name": "login" })
                    } else {
                        ElMessage.error(`注册失败！${res['msg']}`)
                    }
                    loading.value = false;
                })
            }).catch(() => {
                console.log('表单验证失败');
            });
        };

        // 获取请求体
        const getRequestBody = () => {
            let request = { "companyAddress": "", "companyName": "", "confirmPassword": "", "email": "", "identity": 1, "password": "", "phonenumber": "", "username": "" }
            request.companyAddress = form.value.companyAddress
            request.companyName = form.value.companyName
            request.confirmPassword = form.value.confirmPassword
            request.email = form.value.email
            request.identity = 1
            request.password = form.value.password
            request.phonenumber = form.value.phone
            request.username = form.value.name
            return request
        }

        return {
            form,
            loading,
            rules,
            formRef,
            handleRegister
        };
    }
});
</script>

<style scoped>
.registerContainer {
    width: 100%;
    height: 100%;
    position: relative;
    background: url('../../assets/image/login.png') 50% no-repeat;
    background-size: 100% 100%;
}

.register-card {
    position: absolute;
    right: 10%;
    top: 20%;
    width: 500px;
}

.register-title {
    text-align: center;
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}

.el-button {
    width: 100%;
}

.el-select {
    width: 100%;
}
</style>